<template>
    <div class="my-list-box">
        <div class="base bg-white border-l border-r">
            <div class="left-box border-r">
                <van-collapse v-model="activeNames">
                    <van-collapse-item title="我的视频" name="1">
                        <div class="flex items-center justify-center">
                            <n-button @click="clickLeftTags(-2)">显示所有收藏的视频</n-button>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item title="我的电台" name="2">
                        <div class="flex items-center justify-center">
                            <n-button @click="clickLeftTags(-1)">显示所有收藏的电台</n-button>
                        </div>
                    
                    </van-collapse-item>
                    <van-collapse-item title="创建的歌单" name="3">
                        <div class="px-4 py-1 flex cursor-pointer hover:bg-gray-100"
                             v-for="(item, index) in playListData.slice(0, subCount.createdPlaylistCount)" :key="index"
                             :title="item.name" @click="clickLeftTags(index)">
                            <n-image width="50" height="50"
                                     :src="item.coverImgUrl + '?param=40y40'"></n-image>
                            <div class="ml-3">
                                <p class="pb-2">{{ calString(item.name, 10) }}</p>
                                <p class="">{{ item.trackCount }} 首</p>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item title="收藏的歌单" name="4">
                        <div class="px-4 py-1 flex cursor-pointer hover:bg-gray-100"
                             v-for="(item, index) in playListData.slice(subCount.createdPlaylistCount, subCount.createdPlaylistCount + subCount.subPlaylistCount)"
                             :key="index" :title="item.name" @click="clickLeftTags(index + subCount.createdPlaylistCount)">
                            <n-image width="50" height="50"
                                     :src="item.coverImgUrl + '?param=40y40'"></n-image>
                            <div class="ml-3">
                                <p class="pb-2">{{ calString(item.name, 10) }}</p>
                                <p class="">{{ item.trackCount }} 首</p>
                            </div>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>
            
            <div class="right-box">
                <div class="m-8">
                    <!--                    <my-video title="我的视频"></my-video>-->
                    <!--                    <my-radio title="我订阅的电台"></my-radio>-->
                    <p-l-with-comment :ar-id="arID" :pid="currentPlayListId"></p-l-with-comment>
                    
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import {onMounted, reactive, toRefs} from "vue";
import {NImage, NButton} from 'naive-ui';
import MyVideo from "@/views/song/mylist/MyVideo";
import MyRadio from "@/views/song/mylist/MyRadio";
import PLWithComment from "@/components/PLWithComment";
import {getUserSubCount} from "@/network/user";
import {getUserPlayList} from "@/network/song/song-list";
import {useStore} from "vuex";
import {calString} from "@/util/cal";

export default {
    name: "MyListInfo",
    setup() {
        const TAG = "MyListInfo.vue";
        const store = useStore();
        const myListInfo = reactive({
            activeNames: ['3'],
            isLoadDing: false,
            // 用户id
            uid: store.state.user.uid,
            // 歌单创建人
            arID: store.state.user.uid,
            subCount: {
                djRadioCount: 0,
                mvCount: 0,
                createdPlaylistCount: 0,
                subPlaylistCount: 0
            },
            playListData: [],
            // 当前显示歌单的id
            currentPlayListId: '-1'
        })
        // 显示加载遮罩
        const beLoading = () => {
            store.commit('setLoading', true);
        }
        const init = () => {
            getUserSubCount().then(res => {
                myListInfo.subCount = res.data;
            })
            getUserPlayList(store.state.user.uid).then(res => {
                console.log(res);
                myListInfo.playListData = res.data.playlist;
                myListInfo.currentPlayListId = res.data.playlist[0].id;
            })
            beLoading();
        }
        onMounted(() => {
            init();
        })
        const clickLeftTags = (idx) => {
            if (idx === -2) {
                // 点击了显示所有视频
            } else if (idx === -1) {
                // 惦记了显示所有电台
            } else {
                myListInfo.currentPlayListId = myListInfo.playListData[idx].id;
                myListInfo.arID = myListInfo.playListData[idx].creator.userId;
            }
            beLoading();
        }
        return {
            ...toRefs(myListInfo),
            calString,
            clickLeftTags
        }
    },
    components: {
        MyVideo,
        MyRadio,
        PLWithComment,
        NImage,
        NButton,
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/base.scss';

.my-list-box {
    width: $client-width;
    background: #f4f4f4;
    
    .left-box {
        @apply w-1/5;
        min-height: $client-height;
    }
    
    .right-box {
        @apply w-4/5;
    }
}

</style>